<template>
	<div class="box">
		<v-form-render :global-dsv="state" :form-json="{}" :form-data="state.formData" :option-data="state.optionData" ref="vFormRef"></v-form-render>

		<el-dialog fullscreen :close-on-click-modal="false" :title="'新增'" ref="addOrUpdate" v-model="state.montagedataVisible" width="100%">
			<div v-for="(item, index) in state.test" :item="item" :index="index" :key="index + 1">
				<v-form-render :form-json="item" :form-data="{}" :option-data="{}" ref="addVFormRef"> </v-form-render>
			</div>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.montagedataVisible = false">取消</el-button>
					<el-button type="primary">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name='montageVform'>
import { developApi } from '/@/api/sys/develop-api';
import { systemApi } from '/@/api/sys/system-api';
import { list } from './test.ts';
import data from './data.json';
// import { ElMessage, ElMessageBox, FormInstance, ElLoading } from 'element-plus';
import { ref, reactive, onMounted, nextTick, defineAsyncComponent, getCurrentInstance, defineExpose } from 'vue';
// const formDesigner = defineAsyncComponent(() => import('./formDesigner.vue')); // 引入组件
const vFormRef = ref(); //渲染查询表单
const addVFormRef = ref(); //渲染业务表单
const app = getCurrentInstance(); //获取组件实例
const state = reactive({
	montagedataVisible: false,
	test: list,
	mergeData: [],
	formData: {},
	optionData: {},
	formJson: data,
	developApi: developApi,
  systemApi: systemApi,
  ywList: [],
});

onMounted(() => {
	getList();
	VFaddHandle();
  getDicListByCode()
});

const getDicListByCode = () => {
  state.systemApi.getDicListByCode('1003').then((data: any) => {
    console.log(data,'数据字典');
    state.ywList = data.data
  })
}

//组件挂载后，在渲染器上添加外部组件的实例
const VFaddHandle = () => {
	nextTick(() => {
		vFormRef.value?.setFormJson(state.formJson);
		vFormRef.value?.addEC('montageVform', app?.exposed);
	});
};

const getList = () => {
	state.test = list;
};

const montagedataHandle = () => {
	state.montagedataVisible = true;
};

// 当前组件向外部暴露的方法
defineExpose({
	montagedataHandle,
	state,
});
</script>

<style scoped>
.box {
	width: 100px;
	color: red;
}
</style>